<template>
  <Layout>
    <!--    <Header>-->
    <!--      <div>-->
    <!--        <Input v-model="modelInfo.id" placeholder="Enter modelId" style="width: 300px"/>-->
    <!--        <Button @click="handleImportXml()">Loading</Button>-->
    <!--      </div>-->
    <!--    </Header>-->
    <Tabs @on-click="tabChange" style="margin-left: 1vh;padding-bottom: 1vh">
      <TabPane label="流程设计" icon="logo-apple" name="design"
               style="min-height: 380px; min-width: 280px;height: calc(80vh);width: calc(87vw);">
        <ProcessDesign ref="processDesign" :model-info.sync="modelInfo" :sys-info="sysInfo"
                       @managerSaveXml="managerSaveXml"></ProcessDesign>
      </TabPane>
      <TabPane label="变量管理" icon="logo-windows" name="variable">
        <variable-manager :model-info.sync="modelInfo" :sys-info="sysInfo"></variable-manager>
      </TabPane>
      <TabPane label="BPMN XML" icon="logo-tux" name="xml"
               style="min-height: 380px; min-width: 280px;height: calc(80vh);width: calc(87vw);">
        <bpmn-xml ref="bpmnXml" :model-info.sync="modelInfo"></bpmn-xml>
      </TabPane>
    </Tabs>
  </Layout>
</template>
<script>
import ProcessDesign from './processDesign'
import variableManager from './variableManager'
import bpmnXml from './bpmnXml'

export default {
  name: 'diagramManager',
  components: {
    ProcessDesign,
    variableManager,
    bpmnXml
  },
  props: {
    sysInfo: {
      type: Object,
    },
    modelInfo: {
      type: Object,
    }
  },
  watch: {
    modelInfo: {
      handler(newValue, oldValue) {
        if (oldValue) {
          this.$refs.bpmnXml.reloadXml(newValue.modelXml)
        }
      },
      deep: true
    }
  },
  created() {
    // console.log(this.modelInfo)
  },
  methods: {
    // xml文件
    // handleImportXml () {
    //   const that = this
    //   axios.get(this.sysInfo.baseUrl + '?id=' + this.modelInfo.id).then(response => {
    //     console.log(response.data)
    //     Object.assign(that.modelInfo, response.data)
    //   }).catch(function (error) {
    //     console.log(error)
    //   })
    // },
    diagramManagerImportXml(data) {
      Object.assign(this.modelInfo, data)
    },
    async tabChange(name) {
      if (name === 'xml') {
        const bpmnModeler = this.$refs.processDesign.bpmnModeler
        const result = await bpmnModeler.saveXML()
        console.log(result)
        if (result.xml) {
          this.$refs.bpmnXml.reloadXml(result.xml)
        }
      }
    },
    managerSaveXml(postData) {
      console.log('diagramManager.vue.vue');
      this.$emit("saveXml", postData);
    }
  }
}
</script>

<style scoped>

</style>
